<template>
    <json-editor-vue
        style="width: 100%; height: 100%"
        class="editor"
        v-model="state.data"
        :language="'zh-CN'"
        :modeList="['code', 'text', 'view']"
        @chang="setData"
    />
</template>
<script setup>
// import "jsoneditor"
import * as JSONEditor from "jsoneditor"
import JsonEditorVue from "json-editor-vue3"

import { onMounted, reactive, defineComponent, computed, ref, watchEffect, nextTick } from "vue"
defineComponent({
    components: {
        JsonEditorVue,
    },
})

function setData(a) {
    console.log(a)
}

const state = reactive({
    data: {},
    hasError: false,
})

function setContent(data) {
    if (state.data != data) {
        state.data = data
    }
}
function getContent() {
    return { status: !state.hasError, data: state.data }
}

defineExpose({
    setContent,
    getContent,
})
</script>
<style scoped>
.editor-container {
    height: 100%;
    overflow: hidden;
    width: 100%;
    position: relative;
    display: flex;
    flex-direction: row;
    border-radius: 8px;
}
</style>
<style>
.ejson .ant-tabs-content-top {
    height: 100%;
}
</style>
